<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>event,filter</title>
    <script src="vue.js"></script>
    <script>
    /****
     * event.type 触发事件类型
     * event.target 事件的元素
     * event.stopPropagation()停止事件冒泡(传播)
     * event.preventDefault()阻止事件的的默认行为
     * 
     * @click.stop      //vue阻止冒泡
     * @click.prevent   //vue阻止默认行为
     * @click.once      //vue仅执行一次
     * */    

     window.onload = function(){

        Vue.filter('addZero',function(num){
            return num <10 ? '0'+num : num;
        });

         new Vue({
             el:'#my',
             data:{
                //  currentTime:new Date()
                 currentTime: Date.now()
             },
             methods:{
                 showA:function(){
                     console.log("AAA")
                 },
                 showB:function(){
                     console.log("BBB")
                 },
                 showC:function(e){
                     console.log("CCC")
                     //e.stopPropagation();//阻止冒泡
                     //Vue 写法为 @click.stop=""
                 },
                 open:function(e){
                     console.log("open");
                     //e.preventDefault();//阻止默认行为
                     //Vue 写法为 @click.prevent=""
                 },
                 once:function(){
                     console.log("once");
                 }
             },
             filters:{
                 number:function(data,n){
                     return data.toFixed(n)
                 },
                 date:function(data){
                     let d = new Date(data);
                    return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
                 }
             }
         });
     }
    </script>
</head>

<body>
    <div id="my">

        <!--阻止事件冒泡-->
        <div @click="showA">A
                <div @click="showB">B
                        <div @click.stop="showC">C</div>
                </div>
        </div>
        <hr>
        <!--取消事件默认行为-->
        <a href="http://www.qq.com" @click="open($event)" > link </a>
        <a href="http://www.qq.com" @click.prevent="open($event)" > link2 </a>
        <button @click.once="once">once btn</button> <!--只执行一次-->
        <hr>

        {{ 1 | addZero}}<br>
        {{3.14156 | number(2)}}
        {{currentTime | date }}
    </div>
</body>
</html>